/** global **/
body {
	background-color: tan;
}


/** utility **/
.hidden {
	display: none;
}

.centered {
	display: table;
	height: 100%;
	width: 100%;
}

.centered-vertical {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}




/** specific **/

#startup {
	font-family: Cheboygan;
}

#startup h1{
	font-size: 3em;
}

#story-elements {
	position: absolute;
	background-color: brown;
	width: 200px;
	height: 100%;
}

#scenes {
	margin-left: 200px;
}



/** test dialog **/

.dialogwrapper .bgd {
	position: absolute;
	z-index: 100;
	width: 100%;
	height: 100%;
}

.dialogwrapper .fgd {
	position: absolute;
	z-index: 500;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.dialogwrapper .landscape {
	background-color: blue;
	background-image: url(app://img/04.jpg);
	height: 100%;
	width: 100%;
	-webkit-background-size: 100% 100%;

}
.dialogwrapper .fgd .masker {
	background-color: #000;
	height: 100px;
	width: 100%;
	position: absolute;
	opacity: 0;
	-webkit-transition-property: opacity top bottom;
    -webkit-transition-duration: 1s;

}

.masker.top {
	top: -100px;
}

.masker.bottom {
	bottom: -100px;
}

.dialogwrapper:hover .masker.top{
	top: 0px;
	opacity: 1;
	z-index: 50;
}

.dialogwrapper:hover .masker.bottom{
	bottom: 0px;
	opacity: 1;
	z-index: 50;
}

.dialogwrapper .dialogmsg {
	position: absolute;
	xtop: 0px;
	left: 0px;
	background-color: rgba(0 , 0 , 0 , .5);
	height: 200px;
	width: 100%;
	background-image: -webkit-gradient( linear, 0% 0%, 0% 85%, from( rgba(255, 255, 255, 0.5) ), to( rgba(0, 0, 0, 1) ) );
	bottom: -200px;
	-webkit-transition-property: opacity bottom;
	-webkit-transition-duration: 1.5s;
	-webkit-transition-timing-function: ease-out;
	opacity: 0;
	z-index: 20;
	
	
}

.dialogwrapper .dialogmsg p {
	padding: 8px;
	font-family: Cheboygan;
	color: #FFFFFF;
	text-shadow: black 0.1em 0.1em 0.2em; 
}
.dialogwrapper:hover .dialogmsg {
	bottom: 0px;
	opacity: 1;
}

#intro {
	height: 100%;
	width: 100%;
	background-color: #000;
}

#intro p {
	display: block;
	top: 100px;
	left: 300px;
	color: #FFFFFF;
	font-size: 2.5em;
	position: absolute;
	opacity: .1;
	
	-webkit-transition-delay: 3s,  3s;
	-webkit-transition-property: opacity, left;
  	-webkit-transition-duration: 2s, 4s;

}
#intro p.animate {
	left: 100px;
	opacity: 1;
}
